<template>
	<view class="main">
		<u-form :model="form" ref="uForm">
			<u-form-item label="项目名称" label-width="150">
				<u-input v-model="form.proName" disabled />
			</u-form-item>
			<u-form-item label="项目岗位" label-width="150">
				<u-input v-model="form.proPost" placeholder="请选择项目岗位" type="select" @click="selectshow = true" />
				<u-select style="position:absolute;z-index: 999;" v-model="selectshow" :list="proPostList"
					@confirm='actionSheetCallback'>
				</u-select>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectshow: false,
				form: {
					proName: "",
					proPost: "",
				},
				proPostList: [],
				rules: {
					proName: [{
						required: true,
						message: '请输入擅长岗位',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					proPost: [{
						required: true,
						message: '请输入擅长岗位',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},

			}
		},
		onLoad(options) {
			this.form.proName = options.proName
			this.proPostList = JSON.parse(options.proPostList)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 点击actionSheet回调,显示下拉菜单
			actionSheetCallback(e) {
				this.form.proPost = e[0].label
				this.postId = e[0].value
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(244, 244, 244);
	}

	.main {
		padding: 0 40rpx;
	}
</style>
